<template>
    <!-- 首页路由 -->
  <div class="about">
    <el-container>
        <el-aside>
            <!-- 侧边导航 -->
            <el-row class="tac">
                <el-col :span="12">
                    <!-- <h5>自定义颜色</h5> -->
                    <el-menu
                    :default-active="activeIndex"
                    class="el-menu-vertical-demo"
                    router
                    @select="handleSelect"
                    background-color="#002140"
                    text-color="#999"
                    active-text-color="#fff">
                    <el-menu-item index="1" class="homecentr">
                        <div class="communitylogo">
                            <div class="logobox">
                                <img src="https://cdn7.axureshop.com/demo/1815369/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BAsaas%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0/u203.png" alt="">
                                <img src="https://cdn7.axureshop.com/demo/1815369/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BAsaas%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0/u204.png" alt="">
                                <img src="https://cdn7.axureshop.com/demo/1815369/images/%E6%99%BA%E6%85%A7%E7%A4%BE%E5%8C%BAsaas%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0/u205.png" alt="">
                            </div>
                            <span>智慧社区服务平台</span>
                        </div>
                    </el-menu-item
                    >
                    <el-menu-item index="/about/workbenches" class="worktotal">
                        <i class="el-icon-setting"></i>
                        <span slot="title">工作台</span>
                    </el-menu-item>
                    <el-submenu index="3">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>社区管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/communitymanagement">社区管理</el-menu-item>
                        <el-menu-item index="/about/BuildingManagement">楼宇管理</el-menu-item>
                        <el-menu-item index="/about/HousingManagement">房屋管理</el-menu-item><el-menu-item index="/about/Shopmanagement">商铺管理</el-menu-item><el-menu-item index="/about/Parkingspacemanagement">车位管理</el-menu-item><el-menu-item index="/about/Storageroommanagement">储藏室管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>物业管家</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/PropertyNotice">物业通知</el-menu-item>
                        <el-menu-item index="/about/Ownersreportrepairs">业主报修</el-menu-item>
                        <el-menu-item index="/about/Complaintsandsuggestions">投诉建议</el-menu-item>
                        <!-- <el-menu-item index="4-4">智能门禁</el-menu-item> -->
                        <el-menu-item index="/about/InternalWorkOrder">内部工单</el-menu-item>
                        <el-menu-item index="/about/Visitorinvitation">访客邀请</el-menu-item>
                        <el-menu-item index="/about/Homeownerdecoration">业主装修</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>业主管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/Residentmanagement">业主管理</el-menu-item>
                        <el-menu-item index="/about/Ownermanagement">住户管理</el-menu-item>
                        <el-menu-item index="/about/Entryandexitrecords/Vehiclerecords">出入记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>缴费管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/Chargeitems">收费项目</el-menu-item>
                        <el-menu-item index="6-2">生成账单</el-menu-item>
                        <el-menu-item index="6-3">押金管理</el-menu-item>
                        <el-menu-item index="/about/Meterreadingbill">抄表账单</el-menu-item>
                        <el-menu-item index="/about/Coststatistics">费用统计</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- <el-submenu index="7">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>安防管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="7-1">巡更点位</el-menu-item>
                        <el-menu-item index="7-2">巡更分类</el-menu-item>
                        <el-menu-item index="7-3">巡更路线</el-menu-item>
                        <el-menu-item index="7-4">巡检项目</el-menu-item>
                        <el-menu-item index="7-5">巡检计划与任务</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu> -->
                    <!-- <el-submenu index="8">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>社区资讯</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="8-1">社区活动</el-menu-item>
                        <el-menu-item index="8-2">资讯分类</el-menu-item>
                        <el-menu-item index="8-3">资讯内容</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu> -->
                    <!-- <el-submenu index="9">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>智能物联</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="8-1">硬件管理</el-menu-item>
                        <el-menu-item index="8-2">硬件分类</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu> -->
                    <el-submenu index="9">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>智能物联</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/Hardwaremanagement">硬件管理</el-menu-item>
                        <el-menu-item index="/about/Hardwareclassification">硬件分类</el-menu-item>
                        <!-- <el-menu-item index="8-2"> 智能停车</el-menu-item> -->
                        <el-submenu index="9-3">
                        <template slot="title">智能停车</template>
                        <el-menu-item index="/about/parkingmanagement">停车场管理</el-menu-item>
                        <el-menu-item index="/about/parkinglotmange">    车位管理</el-menu-item>
                        <el-menu-item index="/about/MonthlyCardManagement">    月卡管理</el-menu-item>
                        <el-menu-item index="/about/Parkingrecord">    停车记录</el-menu-item>
                        </el-submenu>
                        <el-submenu index="9-4">
                        <template slot="title">智能巡检</template>
                        <el-menu-item index="9-4-1">     巡检点位</el-menu-item>
                        <el-menu-item index="9-4-2">         巡检路线</el-menu-item>
                        <el-menu-item index="9-4-3">         巡检计划与任务</el-menu-item>
                        </el-submenu>
                        <el-submenu index="9-5">
                        <template slot="title">    智能门禁</template>
                        <el-menu-item index="/about/Accesscontrol">     门禁管理</el-menu-item>
                        <el-menu-item index="/about/Ownerreview">     业主审核</el-menu-item>
                        <el-menu-item index="/about/Travelrecord">     通行记录</el-menu-item>
                        </el-submenu>
                        <el-submenu index="9-6">
                        <template slot="title">    智能监控</template>
                        <el-menu-item index="9-6-1">     监控分组</el-menu-item>
                        <el-menu-item index="9-6-2">     监控管理</el-menu-item>
                        <el-menu-item index="9-6-3">     监控大屏</el-menu-item>
                        </el-submenu>
                        <el-submenu index="9-7">
                        <template slot="title">    能耗管理</template>
                        <el-menu-item index="9-7-1">     仪表管理</el-menu-item>
                        <el-menu-item index="9-7-2">     仪表配置</el-menu-item>
                        <el-menu-item index="9-7-3">     抄表数据</el-menu-item>
                        </el-submenu>
                        <el-submenu index="9-8">
                        <template slot="title">    智慧照明</template>
                        <el-menu-item index="9-8-1">     灯控管理</el-menu-item>
                        <el-menu-item index="9-8-2">     线控管理</el-menu-item>
                        </el-submenu>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="10">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>组织架构</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/Organizationalstructure">组织架构</el-menu-item>
                        <el-menu-item index="/about/Staffmanagement">员工管理</el-menu-item>
                        <el-menu-item index="/about/Rolesmanagement">角色管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="11">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="/about/Basicinformation">基本信息</el-menu-item>
                        <el-menu-item index="/about/OperationLog">操作日志</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
        <el-container>
            <!-- 主页面顶部 通用-->
            <el-header>
                <div class="headerback">
                    <ul class="topnav">
                        <li class="adli">
                            <div class="admin">
                                <i class="el-icon-user-solid"></i>
                                <span class="admintitle"> Admin </span>
                                <i class="el-icon-arrow-down"></i>
                            </div>
                            <div class="adminhover">
                                <p>修改密码</p>
                                <p>基本信息</p>
                            </div>
                        </li>
                        <li class="msgli">
                            <div class="messagecenter">
                                <el-badge :value="200" :max="99" class="item">
                                    <i class="el-icon-message-solid"></i>
                                    <!-- <el-button size="small">评论</el-button> -->
                                </el-badge>
                            </div>
                            <div class="message">
                                <div class="msgtitle">消息中心</div>
                                <ul class="msglists">
                                    <li>
                                        <span class="liststitles">全部消息</span>
                                        <p class="count">
                                           (<span>10</span>)
                                        </p>
                                    </li>
                                    <li>
                                        <span class="liststitles">业主审核消息</span>
                                        <p class="count">
                                           (<span>10</span>)
                                        </p>
                                    </li>
                                    <li>
                                        <span class="liststitles">投诉消息</span>
                                        <p class="count">
                                           (<span>10</span>)
                                        </p>
                                    </li>
                                    <li>
                                        <span class="liststitles">缴费消息</span>
                                        <p class="count">
                                           (<span>10</span>)
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="shezhi">
                                <i class="el-icon-s-tools"></i>
                            </div>
                        </li>
                        <li>
                            <div class="shezhi">
                                <i class="el-icon-switch-button"></i>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel_state-twice">
                    <div class="brake">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/about/workbenches' }"><i class="el-icon-menu"></i></el-breadcrumb-item>
                            <el-breadcrumb-item>一级分类</el-breadcrumb-item>
                            <el-breadcrumb-item>工作台</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="twice-right">
                        <i class="el-icon-arrow-left"></i>
                        <i class="el-icon-refresh"></i>
                    </div>
                </div>
            </el-header>
            <!-- 主切换盒子  路由 -->
            <el-main>
                <router-view></router-view>
                <!-- <div class="mainbox">
                    <ul class="workbenches">
                        <li>
                            <p class="topleft-tetx">
                                <i class="el-icon-office-building"></i>
                                <span>社区</span>
                            </p>
                            <p class="middletext">38个</p>
                            <p class="jumptext">
                                <span>查看社区</span>
                                <span>添加社区</span>
                            </p>
                        </li>
                         <li>
                            <p class="topleft-tetx">
                                <i class="el-icon-office-building"></i>
                                <span>楼宇</span>
                            </p>
                            <p class="middletext">123个</p>
                            <p class="jumptext">
                                <span>查看楼宇</span>
                                <span>添加楼宇</span>
                            </p>
                        </li>
                         <li>
                            <p class="topleft-tetx">
                                <i class="el-icon-office-building"></i>
                                <span>房屋</span>
                            </p>
                            <p class="middletext">1000</p>
                            <p class="jumptext">
                                <span>查看房屋</span>
                                <span>添加房屋</span>
                            </p>
                        </li>
                         <li>
                            <p class="topleft-tetx">
                                <i class="el-icon-office-building"></i>
                                <span>商铺</span>
                            </p>
                            <p class="middletext">4000</p>
                            <p class="jumptext">
                                <span>查看商铺</span>
                                <span>添加商铺</span>
                            </p>
                        </li>
                         <li>
                            <p class="topleft-tetx">
                                <i class="el-icon-office-building"></i>
                                <span>车位</span>
                            </p>
                            <p class="middletext">443</p>
                            <p class="jumptext">
                                <span>查看车位</span>
                                <span>添加车位</span>
                            </p>
                        </li>
                    </ul>
                    <div class="Quick-operation">
                        <div class="Quick-operationtitle">
                            <p>快速操作</p>
                        </div>
                        <ul class="quickoperationlists">
                            <li>
                                <i class="el-icon-office-building"></i>
                                <p>新建小区</p>
                            </li>
                            <li>
                                <i class="el-icon-school"></i>
                                <p>新建楼宇</p>
                            </li>
                            <li>
                                <i class="el-icon-price-tag"></i>
                                <p>添加房屋</p>
                            </li>
                            <li>
                                <i class="el-icon-user"></i>
                                <p>添加业主</p>
                            </li>
                        </ul>
                    </div>
                    实时概况和今日提醒
                    <div class="Realtime-today">
                        <div class="Realtimeoverview">
                            <div class="Quick-operationtitle">
                                <p>快速操作</p>
                            </div>
                            <ul class="Realtimeoverviewlists">
                                <li>
                                    <p class="cache32">待审核业主</p>
                                    <p class="cache35">2002</p>
                                </li>
                                <li>
                                    <p class="cache32">待审核家属</p>
                                    <p class="cache35">123</p>
                                </li>
                                <li>
                                    <p class="cache32">待处理故障</p>
                                    <p class="cache35">234</p>
                                </li>
                                <li>
                                    <p class="cache32">待处理报修</p>
                                    <p class="cache35">13</p>
                                </li>
                                <li>
                                    <p class="cache32">待处理投诉</p>
                                    <p class="cache35">133</p>
                                </li>
                                <li>
                                    <p class="cache32">待处理工单</p>
                                    <p class="cache35">13</p>
                                </li>
                            </ul>
                        </div>
                        <div class="Todaysreminder">
                            <div class="Quick-operationtitle">
                                <p>快速操作</p>
                                <p class="moreview">
                                    <span>查看更多</span>
                                    <i class="el-icon-arrow-right"></i>
                                </p>
                            </div>
                            <ul class="Todaysreminderlists">
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                                <li>
                                    <p class="infotadays">【投诉建议】楼道的垃圾处理不及时！ </p>
                                    <p class="todaytime">
                                        <i class="el-icon-timer"></i>
                                        <span> 2021-06-22 09:00</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div> -->
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data(){
        return{
             activeIndex: '/about/workbenches',
        }
    },
    methods: {
      handleSelect(key, keyPath) {
        this.activeIndex=key
        console.log(key, keyPath,333333333);
      }
    }
  }
</script>


<style scope>
    ul{
        list-style: none;
    }
    .about{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        /* overflow-y:auto ; */
    }
    .tac{
        overflow-y: auto;
        scrollbar-width: none;
        /* 侧边导航竖向滚动条清除  未添加浏览器属性 */
    }
    /* 工作台盒子视图 */
    .mainbox{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 74%;
        /* height: 74%; */
        overflow: scroll;
        scrollbar-width: none;
        /* 主页面滚动盒子横向滚动条清除  未添加浏览器属性 */
    }
    .workbenches{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .workbenches li{
        width: 236px;
        height: 140px;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        border-radius: 10px;
        box-sizing: border-box;
        position: relative;
    }
    /* 每个li顶部文字 */
    .topleft-tetx{
        font-size: 14px;
        position: absolute;
        top: 10px;
        left: 20px;
    }
    .topleft-tetx i{
        font-weight: 700;
        margin-right: 5px;
    }
    .topleft-tetx span{
        font-weight: 400;
        color: rgba(0, 0, 0, 0.427450980392157);
    }
    /* 每个li中间文本数字 */
    .middletext{
        font-size: 30px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-family: 'Montserrat';
        font-weight: 700;
        color: rgba(0, 0, 0, 0.847058823529412);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    /* 每个li底部文字文本 */
    .jumptext{
        position: absolute;
        top: 105px;
        left: 100px;
        display: flex;
    }
    .jumptext span{
        width: 68px;
        height: 26px;
        font-size: 12px;
        color: #0079FE;
        text-align: left;
        line-height: 22px;
        display: inline-block;
        cursor: pointer;
    }

    /* 快速操作 */
    .Quick-operation{
        width: 100%;
        height: 200px;
        margin-top: 20px;
        color: #999999;
        text-align: left;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(233, 233, 233, 1);
    }
    .Quick-operationtitle{
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(233, 233, 233, 1);

    }
    .moreview{
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(228, 228, 228, 1);
    }
    .moreview:hover{
        border: 1px solid #0079FE;
        cursor: pointer;
    }
    .moreview:hover span{
        color: #0079FE !important;
    }
    .moreview:hover i{
        color: #0079FE !important;
    }
    .moreview span{
        font-size: 12px;
        color: #999;
    }
    .el-icon-arrow-right{
        font-size: 12px;
    }
    /* 快速操作标题 */
    .Quick-operationtitle p{
        color: #666;
        font-weight: 700;
        font-size: 14px;
    }
    /* 快速操作列表 */
    .quickoperationlists{
        width: 100%;
        height: 140px;
        padding-left: 20px;
        padding-top: 10px;
        box-sizing: border-box;
        display: flex;
    }
    .quickoperationlists li{
        width: 122px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
     .quickoperationlists li:hover{
        background-color: #f9f9f9;
        border: 1px solid rgb(228,228,228);
        cursor: pointer;
     }
    .quickoperationlists li i{
        font-size: 40px !important;
    }
    .quickoperationlists li p{
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        color: #666;
        margin-top: 5px;
        box-sizing: border-box;
    }
    /* 实时概况和今日提醒 */
    .Realtime-today{
        width: 100%;
        height: 400px;
        margin-top: 20px;
        /* background-color: #fff; */
        display: flex;
        justify-content: space-between;
    }
    /* 实时概况 */
    .Realtimeoverview,.Todaysreminder{
        width: 625px;
        color: #999999;
        text-align: left;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(233, 233, 233, 1);
    }
    .Realtimeoverviewlists{
        padding-top: 10px;
        padding-left: 20px;
        display: flex;
        flex-wrap: wrap;
    }
    .Realtimeoverviewlists li{
        width: 142px;
        height: 155px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .Realtimeoverviewlists li p{
        width: 142px;
        height: 48px;
        line-height: 48px;
        text-align: center;
    }
    .cache35{
        font-size: 28px;
        color: #666;
        cursor: pointer;
    }
    .cache35:hover{
        color: #999 !important;
    }
    /* 今日提醒 */
    .Todaysreminderlists{
        padding: 10px 20px 0;
    }
    .Todaysreminderlists li{
        width: 585px;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
    }
    .infotadays{
        width: 428px;
        font-size: 12px;
        color:#333;
        font-weight: 700;
        cursor: pointer;
    }
    .infotadays:hover{
        color: #999 !important;
    }
    .todaytime{
        font-size: 13px;
        color: #999;
    }

    .headerback{
        height: 70px;
        padding: 0 20px;
        box-shadow: 0px 3px 5px rgba(204, 204, 204, 0.2) !important;
        /* border-bottom: 1px solid #000; */
    }
    .panel_state-twice{
        height: 50px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .el-icon-refresh{
        margin-left: 20px;
    }
    .twice-right i:hover{
        cursor: pointer;
    }
    .topnav{
        list-style: none;
        width: 520px;
        display: flex;
        justify-content: flex-end;
        float:right;
    }
    
    .topnav li{
        position: relative;
        height: 70px;
    }
    .topnav li:hover,.adminhover p:hover{
        background-color: rgba(0, 0, 0, 0.0470588235294118);
    }
    .adli:hover .adminhover{
        display: flex;
    }
     .el-popover__reference{
        border: none !important;
        padding: 0 !important;
        line-height: normal !important;
     }
     .el-button:hover{
        background-color: rgba(0, 0, 0, 0.0470588235294118) ;
        color: inherit ;
     }
     .el-button--primary:hover {
        background: #3394fe !important;
        border-color: #3394fe !important;
        color: #FFF !important;
    }
    
    .el-aside{
        width: 240px !important;
        text-align: left !important;
        line-height: normal !important;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
    }
    .el-header{
        height: 120px !important;
        background-color: #fff;
        padding: 0;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    .el-badge__content.is-fixed {
        top: 20px !important;
    }
    .el-main {
        background-color: #f0f2f5;
        color: #333;
        padding: 20px 0;
        /* text-align: center; */
        /* line-height: 160px; */
    }

    .el-icon-user-solid{
        font-size: 20px !important;
        margin-right: 5px;
    }

    .admin{
        width: 120px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 12px !important;
        cursor: pointer;
    }
    .adminhover{
        width: 120px;
        height: 86px;
        background-color: #fff;
        box-shadow: 0px 0px 5px rgba(102, 102, 102, 0.349019607843137);
        font-size: 12px;
        color: #999;
        display: none;
        flex-direction: column;
        justify-content: center;
    }
    .adminhover p{
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }

    .admin span{
        font-size: 14px;
    }

    .messagecenter,.shezhi{
        width: 60px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        font-size: 20px !important;
    }

    .message{
        width: 180px;
        height: 210px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 0px 5px rgba(102, 102, 102, 0.349019607843137);
        position: absolute;
        top: 70px;
        left: -54px;
        z-index: -99;
        transition: all 0.3s;
    }
    
    .msgtitle{
        width: 180px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        background-color: rgba(242, 242, 242, 1);
        border: 1px solid rgba(228, 228, 228, 1);
        padding-left: 20px;
        font-size: 12px;
        color: #999;
        text-align: left;
    }

    .msglists{
        list-style: none;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .msglists li{
        width: 140px;
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .msglists li:hover .liststitles{
        color: rgb(0,151,254);
        cursor: pointer;
    }
    .msglists li:hover{
        background-color: #fff;
    }
    .msgli:hover .message{
        z-index: 99;
    }

    .liststitles{
        font-size: 12px;
        color: #666;
    }

    .count{
        font-size: 12px;
        color: #666;
        text-align: center;
    }
    .count span{
        color: #f04844;
    }

    .el-menu-vertical-demo{
        height: 100vh;
    }
    .worktotal{
        text-align: center;
        padding-left: 0 !important;
    }
    .el-col-12{
        width: 240px !important;
    }
    .homecentr{
        text-align: center;
        height: 70px;
    }
    .communitylogo{
        height: 70px;
        display: flex;
        align-items: center;
    }
    .logobox{
        width: 35px;
        height: 40px;
        position: relative;
    }
    .logobox img:nth-child(1){
        position: absolute;
        top: 7px;
        left: -5px;
    }
    .logobox img:nth-child(2){
        position: absolute;
        top: 0px;
        left: -4px;
    }
    .logobox img:nth-child(3){
        position: absolute;
        right:4px;
        top: 10px;
    }
    .communitylogo span{
        font-size: 18px;
        color: #ccc;
        margin-left: 15px;
    }
    .el-menu-item span,.el-submenu span,.el-menu-item,.el-submenu__title{
        font-size: 14px;
        font-weight: 700;
    }
    .el-menu-item-group__title {
        padding: 0;
    }
     .is-active{
        background-color: #0079FE !important;
        color: #fff;
    }
</style>